import { useState, useEffect } from 'react';
import Sidebar from './components/Sidebar';
import MainContent from './components/MainContent';
import './index.css';
import logo from './assets/logo.png';

function App() {
  // 从 localStorage 中获取之前保存的选中页面，如果没有则默认显示学习心得
  const initialSelected = localStorage.getItem('selectedPage') || '心得';
  const [selected, setSelected] = useState(initialSelected);

  // 当 selected 状态改变时，将其保存到 localStorage 中
  useEffect(() => {
    localStorage.setItem('selectedPage', selected);
  }, [selected]);

  // 从 localStorage 中获取之前保存的侧边栏折叠状态
  const initialCollapsed = localStorage.getItem('sidebarCollapsed') === 'true';
  const [collapsed, setCollapsed] = useState(initialCollapsed);

  // 当 collapsed 状态改变时，将其保存到 localStorage 中
  useEffect(() => {
    localStorage.setItem('sidebarCollapsed', String(collapsed));
  }, [collapsed]);

  return (
    <div className="app-root-layout">
      <div className="app-header">
        <img src={logo} alt="logo" style={{ height: 36, marginRight: 16 }} />
        <span className="app-title">中南民族大学 王子冉 大作业</span>
      </div>
      <div className="app-main-layout">
        <Sidebar
          selected={selected}
          onSelect={setSelected}
          collapsed={collapsed}
          onToggle={() => setCollapsed(!collapsed)}
        />
        <div className="app-content-area">
          <MainContent selected={selected} />
        </div>
      </div>
    </div>
  );
}

export default App;